<template>
	<view class="page">
		<view class="" v-if="Status==1">
			<view class="head-info">
				<!-- 搜索 -->
				<view class="head-search">
					<!-- <view class="icon-info" @click="onCode">
						<text class="iconfont icon-saoyisao"></text>
						
					</view> -->
					<view class="search" style="width: 100%;">
						<view class="icon">
							<image src="/static/fdj_ico.png" mode=""></image>
						</view>
						<view class="hint">
							<input type="text" @confirm="goSearch" placeholder="搜索" v-model="search" placeholder-style="color:#fff" style="color: #fff;" />
							<!-- <text class="max">搜索</text>
							<text class="min">热门内容</text> -->
						</view>
					</view>
					<!-- <view class="icon-info" @click="quHuo">
						<text class="iconfont icon-fukuanma"></text>
						
					</view> -->
				</view>
			</view>
			<view class="main" v-show="classifyShow===0">
				<!-- banner -->
				<view class="banner">
					<swiper class="screen-swiper square-dot" indicator-dots="true" circular="true" autoplay="true"
						interval="5000" duration="500">
						<swiper-item v-for="(item,index) in swiperList" :key="index">
							<image :src="item.image" mode="aspectFill" v-if="item.type==1" @click="onSkip(item.url)"></image>
							<video :src="item.video" id="myVideo"  :autoplay="true" :enable-progress-gesture="false" loop muted show-play-btn controls objectFit="cover" @pause="suspend" @ended="suspend" v-if="item.type==2"></video>
						</swiper-item>
					</swiper>
				</view>
				<!-- <video :src="swiperList.video" :poster="swiperList.image" :autoplay="false" style="width: 720rpx;height: 400rpx;margin: 0 auto;display: block;"></video> -->
				<!-- 菜单导航 -->
				<view class="menu-nav" :style="navList.length<=10?'height:160rpx':''">
					<scroll-view scroll-x @scroll="ScrollMenu" class="nav-list" :style="navList.length<=10?'height:160rpx':''">
						<view class="nav" ref="nav" :style="navList.length<=10?'flex-direction:row;height:160rpx':''">
							<view class="list" v-for="(item,index) in navList" @click="onSkip(item.url)" :key="item.id">
								<image :src="item.logo" mode=""></image>
								<text>{{item.name}}</text>
							</view>
						</view>
					</scroll-view>
					<view class="indicator" v-if="navList.length>10">
						<view class="plan">
							<view class="bar" :style="'left:'+slideNum+'%'"></view>
						</view>
					</view>
				</view>
				<!-- 通知 -->
				<view class="inform">
					<view class="inform-info">
						<view class="picture">
							<image src="/static/gg_ico.png" mode=""></image>
						</view>
						<view class="info">
							<swiper class="swiper" :circular="true" :vertical="true" :indicator-dots="false"
								:autoplay="true" :interval="3000" :duration="1000">
								<swiper-item  v-for="(item,index) in noticeList" :key="index">
									<view class="swiper-item">
										<text class="one-omit">{{item.name}}</text>
									</view>
								</swiper-item>
								
							</swiper>
						</view>
					</view>
				</view>
				<!-- 为你推荐 -->
				<view class="recommend-info">
					<view class="recommend-title">
						<view class="title">
							<image src="@/static/wntj_title.png" mode=""></image>
						</view>
					</view>
					<view class="goods-list">
						<view class="list flex " v-for="(item,index) in goodsList" @click="onSkip('/pages/GoodsDetails/GoodsDetails?id='+item.code)" :key="index" v-if="goodsList.length!=0">
							<view class="pictrue">
								<image :src="item.cover"></image>
							</view>
							<view class="right" style="width: 100%;">
								<view class="title-tag">
									<view class="tag">
										<text v-if="item.is_goods === 1">特价</text>
										{{item.name}}
									</view>
								</view>
								<view class="price-info flex flex-align flex-bt">
									<view class="user-price">
										<text class="min">￥</text>
										<text class="max">{{item.price_selling}}</text>
									</view>
									<view class="vip-price flex flex-center flex-align">
										<tui-icon name="cart" color="#fff" :size="18"></tui-icon>
									</view>
								</view>
							</view>
							
						</view>
						<view class="empty-box" v-if="goodsList.length==0" style="padding-top: 20rpx;">
							<image src="/static/ic_nodata.png" mode=""></image>
							<view class="" style="color: #999;">暂无商品</view>
						</view>
					</view>
				</view>
			</view>
			<ClassifyData v-show="classifyShow!=0"></ClassifyData>
		</view>
		<view class="" v-else>
			<view class="homeHeader">
				<view class="header" :style="'background: url('+bjImg+') no-repeat;background-size:100%'">
					<view class="headerSear flex flex-align flex-bt" style="padding: 0 30rpx;">
						<!-- <view class="left flex flex-align" v-if="isLogin">
							<image :src="dataInfo.image" mode=""></image>
							<view class="">{{dataInfo.community_name}}</view>
						</view>
						<view class="left flex flex-align" v-else @click="tui.wetLogin()">
							<image src="" mode=""></image>
							<view class="">去登录</view>
						</view> -->
						<view class="right flex flex-align" style="width: 100%;">
							<view class="icon">
								<tui-icon name="search" :size="20" color=" #999"></tui-icon>
							</view>
							<view class="hint">
								<input type="text" @confirm="goSearch" placeholder="搜索" v-model="search" placeholder-style="color:#999" style="color: #333;" />
								<!-- <text class="max">搜索</text>
								<text class="min">热门内容</text> -->
							</view>
						</view>
					</view>
				</view>
				<view class="headerBj" :style="'background: url('+bjImg+') no-repeat;background-size:100% 100%;'">
					
				</view>
				<view class="" style="height: 240rpx;"></view>
				<view class="homeDaohang" v-for="(item,index) in homeList" :key="index" @click="onSkip(item.url)">
					<image :src="item.img" mode="widthFix" style="width: 700rpx;"></image>
				</view>
				<view class="recommend-info">
					<view class="recommend-title">
						<view class="title">
							<image src="/static/wntj_title.png" mode=""></image>
						</view>
					</view>
					<view class="goods-list">
						<view class="list flex " v-for="(item,index) in goodsList" @click="onSkip('/pages/GoodsDetails/GoodsDetails?id='+item.code)" :key="index" v-if="goodsList.length!=0">
							<view class="pictrue">
								<image :src="item.cover"></image>
							</view>
							<view class="right" style="width: 100%;">
								<view class="title-tag">
									<view class="tag">
										<text v-if="item.is_goods === 1">特价</text>
										{{item.name}}
									</view>
								</view>
								<view class="price-info flex flex-align flex-bt">
									<view class="user-price">
										<text class="min">￥</text>
										<text class="max">{{item.price_selling}}</text>
									</view>
									<view class="vip-price flex flex-center flex-align">
										<tui-icon name="cart" color="#fff" :size="18"></tui-icon>
									</view>
								</view>
							</view>
							
						</view>
						<view class="empty-box" v-if="goodsList.length==0" style="padding-top: 20rpx;">
							<image src="/static/ic_nodata.png" mode=""></image>
							<view class="" style="color: #999;">暂无商品</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- tabbar -->
		<TabBar :tabBarShow="0"></TabBar>
		<view class="rule-win">
			<view class="cu-modal" :class="{'show':isRule}">
				<view class="cu-dialog" style="width: 630rpx;">
					<view class="cu-bar bg-white justify-end">
						<view class="content">您的提货码为</view>
						<view class="action">
							<text class="cuIcon-close text-red" @click="isRule = false"></text>
						</view>
					</view>
					<view class="rule-content">
						<image :src="quhuoImg" mode="" style="width: 300rpx;height: 300rpx;margin: 0 auto;display: block;"></image>
						<view class="" style="color:#999;text-align: center;margin: 40rpx 0 20rpx;">
							提货时请出示提货二维码
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="rule-win">
			<view class="cu-modal" :class="{'show':isRule}">
				<view class="cu-dialog" style="width: 560rpx;">
					<view class="cu-bar bg-white justify-end">
						<view class="content"></view>
						<view class="action" style="align-items: normal;padding-top: 30rpx;">
							<text class="cuIcon-close text-red" style="height: 40rpx;" @click="isRule = false"></text>
						</view>
						<view class="imgIms flex flex-center flex-align">
							<image src="/static/ziti.png" mode=""></image>
						</view>
					</view>
					<view class="rule-content">
						<view class="wenzi">选择社区需要您同意</view>
						<view class="tishi">请先选择自提点</view>
						<view class="tishi">选择后可前往社区自提取货</view>
						<view class="btns" @click="onSkip('/pages/shequ/shequ')">去选择</view>
					</view>
				</view>
			</view>
		</view> -->
		<view class="" style="height: 150rpx;"></view>
		<tui-login :show="show"  @close="guanbi"></tui-login>
	</view>
</template>

<script>
	import TabBar from '../../components/TabBar/TabBar.vue';
	import wx from 'jweixin-module'
	import ClassifyData from '../../components/ClassifyData/ClassifyData.vue';
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			TabBar,
			ClassifyData,
		},
		data() {
			return {
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					use: false
				},
				swiperList: [],
				slideNum: 0,
				navList: [],
				classList: [],
				goodsList: [ ],
				classifyShow: 0,
				// 页面高度
				pageHeight: 500,
				noticeList:[],
				recommend:[],
				page:1,
				search:'',
				isRule:false,
				show:false,
				isLogin:false,
				quhuoImg:'',
				Status:1,
				homeList:[],
				dataInfo:'',
				bjImg:'',
				inviter_code:'',
				code:'',
				autoplay:true
			}
		},
		onReady() {
			uni.hideTabBar();
			// #ifdef MP
			// uni.setNavigationBarTitle({
			// 	title: '首页',
			// })
			// uni.setNavigationBarColor({
			// 	frontColor: '#ffffff',
			// 	backgroundColor: '#fe3b0f',
			// })
			// #endif
		},
		onLoad(e) {
			let that = this
			console.log(e)
			if(e.unionid&&!that.tui.isLogin()){
				that.tui.wechatLogiNew(e)
			}
			if(e.inviter_code){
				console.log(e.inviter_code)
				uni.setStorageSync('refCode', e.inviter_code)
			}
			if(e.zhiboid&&that.tui.isLogin()){
				that.tui.getList(e.zhiboid,1)
			}else if(e.zhiboid&&!that.tui.isLogin()){
				uni.setStorageSync('zhiboid',e.zhiboid)
				window.location.href = that.tui.loginUrl()+'#/pages/login/login?url='+this.tui.faceUrl()+"&inviter_code="+uni.getStorageSync('refCode')
			}
			if(e.shopId&&that.tui.isLogin()){
				that.tui.href('/pages/GoodsDetails/GoodsDetails?id='+e.shopId)
			}else if(e.shopId&&!that.tui.isLogin()){
				uni.setStorageSync('shopId',e.shopId)
				window.location.href = that.tui.loginUrl()+'#/pages/login/login?url='+this.tui.faceUrl()+"&inviter_code="+uni.getStorageSync('refCode')
			}
			
			this.getImg()
		},
		onUnload() {
			/** 这里只保留最新的15条会话记录，以保证初次加载性能 */
			uni.$off('isShow');
			uni.$off('isLogin');
		},
		onPageScroll(e) {
			let scrollTop = e.scrollTop;
			if (scrollTop > 0) {
				this.pageHeight = 210;
			} else {
				this.pageHeight = 500;
			}
		},
		onShow() {
			let that = this
			that.getStatus()
			that.isLogin = this.tui.isLogin()
			uni.$off('isShow');
			uni.$off('isLogin');
			uni.$on('isShow', function(data) {
				that.show = true
			});
			that.page=1
			that.getList()
			uni.$on('isLogin', function(data) {
				that.isLogin = this.tui.isLogin()
				that.tui.wxShare()
				// that.getData()
			});
			if(that.isLogin){
				that.tui.wxShare()
			}
		},
		// #ifdef MP
		onShareAppMessage() {
			return {
				title:'分享海报',
				path:'/pages/home/home?inviter_code='+uni.getStorageSync('inviter_code'),
			};
		},
		// #endif
		onBackPress(){
			alert(5555)
			let that = this
		},
		methods: {
			/*下拉刷新的回调, 有三种处理方式:*/
			quHuo(){
				let that = this
				if(this.isLogin){
					this.isRule = true
				}else{
					// this.tui.wetLogin()
					setTimeout(function(){
						window.location.href = that.tui.loginUrl()+'#/pages/login/login?url='+that.tui.faceUrl()+"&inviter_code="+uni.getStorageSync('refCode')
					},1000)
				}
			},
			change(e) {
				let that = this
				if (e.detail.current != 0) {
					this.list[0].isPlay = false;
					that.autoplay = false;
					if(this.list[0].type==2)
					that.videoContext.pause();
				}
			},
			PlayVideo(item) {
				if (item.isPlay == false) {
					item.isPlay = true;
					that.videoContext.play();
					that.autoplay = true;
				} else {
					item.isPlay = false;
					that.autoplay = false;
					that.videoContext.pause();
				}
			},
			suspend(i) {
				if (that.autoplay == true) {
					that.autoplay = false;
				}
			},
			watchRouter() {
				this.wechat.callWexinShare()
			},
			
			getParam(path, name) {
				  var reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)", "i");   
				  if (reg.test(path))  
				  return unescape(RegExp.$2.replace(/\+/g, " ")); 
				  return "";    
			},
			guanbi(){
				this.show = false
			},
			/*上拉加载的回调*/
			upCallback(page) {
				setTimeout(() => {
					this.mescroll.endByPage(10, 20);
				}, 2000)
			},
			getQuhuoma(){
				let that = this
				that.tui.request("api.auth.live/orderNuc", "POST", {}, false, false, true).then((res) => {
					if(res.code==1){
						that.quhuoImg = res.data.base64
					}
				}).catch((res) => {
				
				})
			},
			getImg(){
				let that = this
				that.tui.request("api.data/bgInfo", "POST", {}, false, false, true).then((res) => {
					if(res.code==1){
						that.bjImg = res.data.home_bg
					}
				}).catch((res) => {
				
				})
			},
			getData(){
				let that = this
				that.tui.request("api.auth.center/get", "POST", {}, false, false, true).then((res) => {
					console.log(res)
					if(res.code==1){
						that.dataInfo = res.data.community_pid
					}
				}).catch((res) => {
				
				})
			},
			getStatus(){
				let that = this
				that.tui.request("api.data/systemStatus", "POST", {}, false, false, true).then((res) => {
					if(res.code==1){
						that.Status = res.data.system_status
						that.homeList = res.data.list
						that.getbanner()
						that.getnotice()
						// that.getbao()
						that.getDaohang()
						if(that.Status==2){
							that.page=1
							that.getList()
							
						}
						
					}
				}).catch((res) => {
				
				})
			},
			goSearch(){
				let that = this
				if(that.tui.isLogin()){
					that.tui.href('/pages/SearchGoodsList/SearchGoodsList?id=0&&keyword='+this.search)
					setTimeout(function(){
						that.search = ''
					},1000)
				}else{
					that.show = true
				}
			
			},
			getbao(){
				let that = this
				that.tui.request("api.data/indexInfo", "POST", {}, false, false, true).then((res) => {
					if(res.code==1){
						that.baoList = res.data.store
						that.recommend = res.data.recommend
					}
				}).catch((res) => {
					
				})
			},
			getDaohang(){
				let that = this
				that.tui.request("api.data/entrance", "POST", {}, false, false, true).then((res) => {
					if(res.code==1){
						that.navList = res.data.list
					}
				}).catch((res) => {
					
				})
			},
			getList(){
				let that = this
				that.tui.request("api.data/goods", "POST", {page:that.page,category_id:0}, false, false, true).then((res) => {
					if(res.code==1){
						that.goodsList = res.data.list
						
					}
				}).catch((res) => {
					
				})
			},
			getnotice(){
				let that = this
				that.tui.request("api.data/notify", "POST", {page:1}, false, false, false).then((res) => {
					if(res.code==1){
						that.noticeList =res.data.list
					}
				}).catch((res) => {
					
				})
			},
			getbanner(){
				let that = this
				that.tui.request("api.data/bannerNew", "POST", {}, false, false, true).then((res) => {
					if(res.code==1){
						that.swiperList = res.data.list
					}
				}).catch((res) => {
					
				})
			},
			/**
			 * 菜单导航滚动
			 */
			ScrollMenu(e) {
				let scrollLeft = e.target.scrollLeft;
				const query = uni.createSelectorQuery().in(this);
				query.select('.nav').boundingClientRect(data => {
					let wid = e.target.scrollWidth - data.width - (data.left * 2 + 5);
					this.slideNum = (scrollLeft / wid * 300) / 2;
				}).exec();
			},
			/**
			 * 搜索点击
			 */
			onSearch() {
				let that = this
				if(this.tui.isLogin()){
					uni.navigateTo({
						url: '/pages/search/search'
					})
				}else{
					// this.tui.wetLogin()
					setTimeout(function(){
						window.location.href = that.tui.loginUrl()+'#/pages/login/login?url='+that.tui.faceUrl()+"&inviter_code="+uni.getStorageSync('refCode')
					},1000)
				}
				
			},
			/**
			 * 扫一扫点击
			 */
			onCode() {
				// 只允许通过相机扫码
				// this.isRule = true
				// this.tui.toast("暂未开放")
				// return
				let that = this
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						that.tui.href(res.result)
					}
				});
			},
			
			/**
			 * 分类点击
			 * @param {Object} item
			 * @param {Number} index
			 */
			onClassify(item, index) {
				this.classifyShow = index;
			},
			/**
			 * 跳转点击
			 * @param {String} type 跳转类型
			 */
			onSkip(type) {
				console.log(type)
				let that = this
				if(this.tui.isLogin()){
					this.isRule =false
					this.tui.href(type)
					// this.tui.href('/pages/zhibo/zhibo')
				}else{
					// this.tui.wetLogin()
					setTimeout(function(){
						window.location.href = that.tui.loginUrl()+'#/pages/login/login?url='+that.tui.faceUrl()+"&inviter_code="+uni.getStorageSync('refCode')
					},1000)
				}
			},
			wetLogin(){
				let that = this
				that.inviter_code=uni.getStorageSync("inviter_code")
				that.tui.request("api.wechat/wechatLogin", "POST", {code: that.code,inviter_code:that.inviter_code}, false, false, false).then((res) => {
					if (res.code == 1) {
						uni.setStorageSync('d_token', res.data.token)
						uni.setStorageSync('headimg', res.data.headimg)
						uni.setStorageSync('inviter_code', res.data.inviter_code)
						window.location.href = 'http://zblive.wyc168.com/#/pages/home/home'
					}
				}).catch((res) => {
				
				})
			},
		}
	};
</script>

<style scoped lang="scss">
	@import 'home.scss';
	// .rule-win{
	// 	.cu-bar{background: url('/static/head_bg.png') no-repeat;background-size: 100% 100%;height: 240rpx;position: relative;
	// 		.text-red{color: #fff;font-weight: bold;}
	// 		.imgIms{width: 160rpx;height: 160rpx;position: absolute;bottom: -50rpx;left: 50%;margin-left: -80rpx;background: #fff;border-radius: 100%;
	// 			image{width: 130rpx;height: 130rpx;}
	// 		}
	// 	}
	// 	.rule-content{background: #fff;
	// 		padding: 60rpx 4% 40rpx;
	// 		text-align: center;
	// 		.wenzi{font-weight: bold;font-size: 30rpx;margin-bottom: 20rpx;}
	// 		.tishi{color: #999;font-size:24rpx;padding: 10rpx 0 0 0;}
	// 		.btns{width: 240rpx;color: #fff;line-height: 70rpx;border-radius: 6rpx;background: #ff0101;margin: 40rpx auto 0;}
	// 	}
	// }
	.rule-win{
		.rule-content{background: #fff;
			padding: 20rpx 4%;
			text-align: left;
			text{
				font-size: 26rpx;
				color: #555555;
				text-align: left;
				line-height: 50rpx;
			}
		}
	}
</style>